<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{padding: 0; margin: 0;}
        #box{
            width: 200px;
            height: 200px;
            background-color:aquamarine;
            margin: 20px;
        }
    </style>
</head>
<body>
    <!-- <div id="box" style="width:400px;">11111</div> -->
    <div id="box" >11111</div>
</body>
<script>
    // 变量的应用
    // (1) 将重复使用的数据存储起来, 后续可以继续复用
    // (2) 通过复用代码,让代码结构更加简洁 清晰


    // console.log((100 + 200) * 3);
    // console.log((100 + 200) / 5);

    // var a = 100;
    // var b = 200;
    // var sum = a + b; 
    // var c = sum * 3;
    // var d = sum / 5;
    // console.log(a, b, sum, c, d)


    // 非变量版
    // document.getElementById("id名")  在文档(页面)中通过id名获取元素,返回被获取的元素

    // 获取元素
    // console.log(document.getElementById("box"));
    // console.log(document.getElementById("box1")); // null

    // 操作元素(操作元素前需要先获取元素)
     // 先获取元素,在改变元素的内容 
    // document.getElementById("box").innerText = "2222"; 

    // 先获取元素,改变元素的样式  => JS操作元素改变样式时,都是通过内联样式实现的
    //  <div id="box" style="width:400px;height:200px;background-color:red">11111</div>

    // document.getElementById("box").style.width = "400px";
    // document.getElementById("box").style.height = "400px";
    // document.getElementById("box").style.backgroundColor = "red";



    // 代码简化
    var box = document.getElementById("box"); // 对应id名获取元素 => 赋值给变量box
    console.log(box);

    // 修改文本和样式  (此处在JS脚本加载时执行 -> 页面打开时)
    // box.innerText = "33333";  // 将字符串 "3333" 赋值给box的innerText => 可以修改标签内的文本
    // box.style.width = "100px";  //  将字符串 "100px" 赋值给box的内联样式中width => 可以修改元素的宽度
    // box.style.height = "100px";
    // box.style.backgroundColor = "green";


    //  绑定事件(此处在JS脚本加载时只是绑定事件 => 触发事件需要点击box)
    //  给box绑定点击事件,鼠标左键单击元素时执行 function(){} 内 {}中的代码
    box.onclick = function(){  // box被点击时执行

        // box被点击时执行的代码
        box.innerText = "33333";  // 将字符串 "3333" 赋值给box的innerText => 可以修改标签内的文本
        box.style.width = "100px";  //  将字符串 "100px" 赋值给box的内联样式中width => 可以修改元素的宽度
        box.style.height = "100px";
        box.style.backgroundColor = "red";

    }


</script>
</html>